<template>
  <div class="information">
    <div class="font12 breadcrumb">首页/<span class="grey">行业资讯</span></div>
    <div class="top-banner displayFlex">
      <div class="swiper-container" style="width: 506px">
        <el-carousel height="285px">
          <el-carousel-item
            v-for="(item, index) in headlineNewsList"
            :key="index"
          >
            <img
              :src="item.newsPic"
              style="width: 506px; height: 285px"
              alt=""
            />
          </el-carousel-item>
        </el-carousel>
      </div>
      <ul class="newsList_ul">
        <!-- <news-item
          v-for="(item,index) in generalNewsList"
          :key="index"
          :item="item"
        ></news-item> -->
        <li
          class="newsList_li"
          v-for="(item, index) in generalNewsList"
          :key="index"
          @mouseenter="mouseIn"
          @mouseleave="mouseLeave"
        >
          <img :src="item.newsPic" class="newsPicClick" alt="" />
          <div class="newsTitle">{{ item.newsTitle }}</div>
          <!-- <div class="newsShadow" v-show="showShadow"></div> -->
        </li>
      </ul>
    </div>
    <div class="main">
      <div class="title-box">
        <h4 class="title">行业资讯</h4>
      </div>
      <ul class="displayFlex spaceBetween flexWrap newsList">
        <list-item v-for="(item, index) in list" :key="index" :item="item">
        </list-item>
      </ul>
      <el-pagination
        style="text-align: center"
        background
        prev-text="上一页"
        next-text="下一页"
        layout="prev, pager, next"
        :current-page.sync="listQuery.page"
        :page-size.sync="listQuery.pageSize"
        @size-change="getListData()"
        @current-change="getListData()"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import ListItem from "./components/item.vue";
import NewsItem from "./components/newsItem.vue";
import Swiper from "swiper";
import { bannerList, getList } from "@/api/information.js";
export default {
  components: { ListItem, NewsItem },
  data() {
    return {
      total: 0,
      showShadow: true,
      listQuery: {
        pageSize: 8,
        pageNum: 1,
        newsCategory: 2,
        entpId: 170,
      },
      list: [],
      generalNewsList: [], //轮播右侧图
      headlineNewsList: [], //轮播图
    };
  },
  mounted() {
    this.getBannerList(); //获取轮播图数据
    this.getListData(); //获取资讯列表
  },
  methods: {
    mouseIn() {
      this.showShadow = false;
    },
    mouseLeave() {
      this.showShadow = true;
    },
    getBannerList() {
      var params = {
        newsCategory: 2,
        entpId: 170,
      };
      bannerList(params)
        .then((response) => {
          if (response.code === 0) {
            this.headlineNewsList = response.data.headlineNewsList;
            this.generalNewsList = response.data.generalNewsList;
            // this.$nextTick(function () {
            //   this.initSwiper(); //初始化slider
            // });
          }
        })
        .catch((err) => {
          this.headlineNewsList = [];
          this.generalNewsList = [];
          this.$message.error(err.message || "出错了");
        });
    },
    getListData() {
      getList(this.listQuery)
        .then((response) => {
          // let res = response.data;
          if (response.code === 0) {
            this.list = response.data;
            this.total = response.total;
          }
        })
        .catch((err) => {
          this.list = [];
          this.total = 0;
          this.$message.error(err.message || "出错了");
        });
    },
    initSwiper() {
      new Swiper(".swiper-container", {
        loop: true,
        // 如果需要分页器
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        // 如果需要前进后退按钮
        // nextButton: '.swiper-button-next',
        // prevButton: '.swiper-button-prev',
        // 如果需要滚动条
        // scrollbar: '.swiper-scrollbar',
        //如果需要自动切换海报
        autoplay: {
          delay: 2000, //时间 毫秒
          disableOnInteraction: false, //用户操作之后是否停止自动轮播默认true
        },
      });
    },
    getList(val) {
      //val为当前页
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../../node_modules/swiper/css/swiper.min.css";
.newsPicClick {
  width: 236px;
  height: 132px;
  padding-bottom: 20px;
  cursor: pointer;
}
.newsList_li {
  width: 634px;
  height: 132px;
  position: relative;
}
.newsTitle {
  width: 300px;
  height: 48px;
  line-height: 24px;
  // text-align: center;
  position: absolute;
  top: 40px;
  left: 256px;
  // overflow: hidden;
  // text-overflow: ellipsis; //超出部分以省略号显示
  // white-space: nowrap;
  color: #333;
}
.newsShadow {
  width: 390px;
  height: 60px;
  position: absolute;
  bottom: 20px;
  left: 0;
  background-color: rgb(0, 0, 0, 0.3);
}
.breadcrumb {
  padding: 20px 0;
}

.information {
  width: 1200px;
  margin: 0 auto;
  min-height: 750px;
}
.top-banner {
  padding: 20px;
  background: #fff;
  margin-bottom: 20px;
  height: 285px;
}
.slider {
  width: 570px;
  height: 320px;
  margin-right: 20px;
}
.main {
  padding: 20px;
  background: #fff;
}
.img_box {
  width: 1920px;
  height: 1717px;
  img {
    width: 1920px;
    height: 1717px;
  }
}
.title-box {
  border-bottom: 1px solid #eee;
}
.title {
  font-size: 20px;
  font-weight: bold;
  line-height: 100%;
  padding-left: 10px;
  border-left: 4px solid #6495ed;
}
.main > ul {
  padding: 20px 0;
}
.el-pagination.is-background .el-pager li {
  border-radius: 100%;
}
.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev {
  padding-left: 8px;
  padding-right: 8px;
}
.img-title {
  position: absolute;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  padding: 14px 10px;
  color: #fff;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  box-sizing: border-box;
}
.newsList_ul {
  margin: 0;
  padding: 0;
  margin-left: 20px;
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #f7f1f1;
  opacity: 0.4;
}
.swiper-container .swiper-pagination-bullet-active {
  background: #fff;
  opacity: 1;
}
</style>
